import React, { type ReactElement, type ReactNode } from 'react'
import { useRouter } from 'next/router'
import { GetServerSideProps } from 'next'
import Layout from '@/components/default'

interface Iprops {
  children?: ReactNode
  data: any[]
}

const About = (props: Iprops) => {
  const { data } = props
  const router = useRouter()
  const id = router.query.id
  return (
    <div>
      About {id}
      {data.map((item, index) => {
        return <li key={index}>{item}</li>
      })}
    </div>
  )
}

About.getLayout = function getLayout(page: ReactElement) {
  return <Layout>{page}</Layout>
}

export default About

//ssr
export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: {
      data: [1, 2, 3]
    }
  }
}